﻿@model ManageCategoriesViewModel
@{
    ViewBag.Title = @Strings.Categories;
}

<div id="categoryDialog">
    <form id="categoryForm" method="get" action="">
    <div class="editor-label">
        <label for="Name">@Strings.Name:</label>
    </div>
    <div class="editor-field">
        <input id="Name" name="Name" type="text" title='@Strings.Required' class="required" />
        <input id="ID" name="ID" type="hidden" />
    </div>
    <div class="editor-label">
        <label for="Description">@Strings.Category_Description:</label>
    </div>
    <div class="editor-field">
        @Html.TextArea("Description")
    </div>
    <div id="buttons">
        <input class="submit" type="submit" value='@Strings.Save'/>
        <input type="button" value='@Strings.Cancel' id="btnCancel" />
    </div>
    </form>
</div>
<fieldset class="shaded">
    <legend>@Strings.Categories</legend>
    <a href="#" class="create">@Strings.Category_Create</a>
    <br />
    @(Html.Grid(Model.Data).Columns(column =>
{
    column.For(x => Html.RouteLink(x.Name, "ViewCategory", new { name = x.Name })).Sortable(true).SortColumnName("Name").Named("Name").Encode(false);
    column.For(x => x.Description).Sortable(true);
    column.For(x => String.Format("<a href='javascript:void(0)' id='{0}' class='editLink'>{1}</a> | <a href='javascript:void(0)' id='{0}' class='deleteLink'>{2}</a>", x.CategoryId, Strings.Edit, Strings.Delete)).Encode(false);
}
        ).Sort(Model.GridSortOptions))
</fieldset>


<style type="text/css">
    #Name
    {
        width: 250px;
    }
    #Description
    {
        width: 248px;
        height: 40px;
    }
</style>
<script type="text/javascript" src="/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript">
    //global variables
    var dlg;

    $(document).ready(function () {
        dlg = $("#categoryDialog").dialog(
            { autoOpen: false,
                width: 400
            });

        var validator = $("#categoryForm").validate({
            submitHandler: function () {
                dlg.dialog('close');
                if ($("#ID").val().length > 0)
                    updateCategory();
                else
                    createCategory();
            }
        });

        function updateCategory() {
            $.post("/Category/Edit/", $("#categoryForm").serialize(), function (data) {
                if (data.Success == true) {
                    document.location.reload();
                }
                else {
                    alert(data.Message);
                }
            });
        }

        function createCategory() {
            $.post("/Category/Create/", $("#categoryForm").serialize(), function (data) {
                if (data.Success) {
                    document.location.reload();
                }
                else {
                    alert(data.Message);
                }
            });
        }

        $(".create").click(function () {
            $("#ID").val("");
            $("#Name").val("");
            $("#Description").val("");
            dlg.dialog({ title: '@Strings.Category_Create' });
            dlg.dialog('open');
        });

        $("#btnCancel").click(function () {
            validator.resetForm();
            dlg.dialog('close');
        });

        $(".editLink").click(function () {
            editCategory($(this));
        });

        $(".deleteLink").click(function () {
            deleteCategory($(this));
        });
    });

    function getCategory(link) {
        var tr = link.closest('tr');
        category = new Object();
        category.ID = link.attr("id");
        category.Name = $('td:first', tr).text();
        category.Description = $('td:nth-child(2)', tr).text();
        return category;
    }

    function editCategory(link) {
        dlg.dialog({ title: '@Strings.Category_Edit' });
        var category = getCategory(link);
        $("#ID").val(category.ID);
        $("#Name").val(category.Name);
        $("#Description").val(category.Description);
        dlg.dialog('open');
        return false;
    }

    function deleteCategory(link) {
        var tr = link.closest('tr');
        var category = getCategory(link);

        if (confirm('@Html.Raw(Strings.Category_ConfirmDeleteFormatString)'.replace('{0}', category.Name)) == false)
            return;

        $.post("/Category/Delete/", { 'id': category.ID }, function (data) {
            if (data.Success == true) {
                tr.remove();
            }
            else {
                alert(data.Message);
            }
        });
    }
</script>
